<template>
    <div class='tmp'>
        <ul>
            <li v-for='(item,index) in shopcarlist'>
                <mt-switch v-model="item.isshow" @click='setisshow'></mt-switch>
                <img class="" :src="item.thumb_path">
                <div class="content">
                    <div class='title'>{{item.title}}</div>
                    <div class='pric'>
                        <p>单价：{{item.sell_price}}元</p>
                        <div id='computer'>
                            <inputnumber
                                    :goodsnumber='item.number'
                                    :goodsname='item.id'
                                    v-on:goodsobj='getgoodsobj'>
                            </inputnumber>
                        </div>
                        <div class='del' @click='delshops(index,item.id)'>删除</div>
                    </div>
                </div>
            </li>
        </ul>
        <div class='allprice'>
            <p>商品种类：{{shopzhonglei}}</p>
            <p>商品总数：<span id='shopallnumber'>{{shopallnumber}}</span></p>
            <p>结算总价：{{gettotal}}</p>
            <mt-button @click='setisshow'>结算</mt-button>
        </div>
    </div>
</template>
<script>
    import {vm,key2} from '../common/common.js';
    import {getgoodslist,getshopcarobj,getcount,delCache} from '../common/localstorage.js';
    import inputnumber from '../inputnumber/inputnumber.vue';
    import common from '../field/getfield.js';
    export default{
        components:{
            inputnumber:inputnumber
        },
        data(){
            return {
                value:true,
                shopcarlist:[],
                shopzhonglei:0,//商品种类
                shopallnumber:0,//购物车商品总数量
                isshow:false
            }
        },
        computed:{
            //计算总价钱
            gettotal(){
                var total=0;
                this.shopcarlist.forEach(item=>{
                    if(item.isshow==true){
                        total+=item.sell_price*item.number;
                    }
                })
                return total;
            }
        },
        methods:{
            getshopcarlist(){
                let url = common.apidomain+'/api/goods/getshopcarlist/'+getgoodslist().join(',');
                this.$http.get(url).then((res)=>{
                    res.body.message.forEach((item)=>{
                        item.thumb_path='http://ofv795nmp.bkt.clouddn.com/'+item.thumb_path;
                        item.number=getshopcarobj()[item.id];
                        item.isshow=true
                    })
                    this.shopcarlist=res.body.message;
                    console.log(this.shopcarlist)
                    this.gettotal()
                })
            },
            //按钮的true或false；
            setisshow(){
                this.isshow!=this.isshow
            },
            //接受子组件inputnumber.vue传过来的商品对象；
            getgoodsobj(goodsobj){
                this.shopcarlist.forEach(item=>{
                    if(item.id==goodsobj.name){
                        item.number=goodsobj.number
                    }
                })
            },
            delshops(index,id){
                var arr=[];
                this.shopcarlist.forEach((item,i)=>{
                    if(index!=i){
                        arr.push(item)
                    }
                })
                this.shopcarlist=arr;
                delCache(id);
                this.shopallnumber=getcount();
                this.$emit('del',0);
            }
        },
        created(){

            this.shopallnumber=getcount();
            this.shopzhonglei=getgoodslist().length;
            this.getshopcarlist();
        },
        activated(){
            this.gettotal()
        }
    }
    vm.$on(key2,function(input){
        var text=document.getElementById('shopallnumber').innerText;
        text=(text-0)+(input-0);
        text=text<=getgoodslist().length?getgoodslist().length:text;
        document.getElementById('shopallnumber').innerText=text;
    })
</script>
<style scoped>
    .mint-switch{
        float: left;
        margin-top: 35px;
    }
    .tmp ul li{
        height:100px;
        border-bottom: 1px solid rgba(102, 102, 102, 0.61);
    }
    .tmp ul li img{
        float: left;
        height:70px;
        width: 70px;
        margin:15px 5px;
    }
    .tmp > ul > li > div{
        height: 100px;
    }
    .content{
        padding-left: 20px;
        height: 100px;
        overflow: hidden;
    }
    .title{
        font-size: 14px;
        height: 40px;
        overflow: hidden;
    }
    .pric{
        height:60px;
    }
    .pric > p{
        margin:0;
    }
    .pric .del{
        float: right;
        margin-right: 5px;
    }
    .pric #computer{
        margin: 0;
        float: left;
    }
    #computer{
        margin-left: -60px !important;
    }
</style>